<template>
	<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			        	<span class="sr-only">Toggle navigation</span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			        </button>
				<a class="navbar-brand" href="javascript:void(0)" @click="index">
					<img src="/static/img/sun.png" />
				</a>
			</div>
			<div>
				<div class="navbar-form navbar-left" role="search">
					<div class="form-group col-xs-8" style="margin-right: 3px;">
						<input type="text" name="search" class="form-control" placeholder="Search" @keyup.enter="search">
					</div>
					<button type="button" class="btn btn-default" @click="search">Search</button>
				</div>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<!--<form class="navbar-form navbar-left" role="search">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Search">
					</div>
					<button type="button" class="btn btn-default">Submit</button>
				</form>-->
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li class="info">
						<div data-container="body" data-toggle="popover-icon" data-placement="bottom" :title='nickname' data-content="">
							<div class="icon" :style='pic'></div>
						</div>
					</li>
					<li class="info">
						<a href="javascript:void(0)" @click="logout">Logout</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
</template>

<script>
	export default {
		data: function() {
			return {
				icon: '',
				nickname: '',
				content: ''
			}
		},
		computed: {
			pic: function() {
				return 'background-image: url(/api' + this.icon + ')'
			}
		},
		methods: {
			logout: function() {
				this.$router.push('/login')
			},
			search: function(event) {
				this.content = event.target.parentNode.querySelector('[name=search]').value
				this.$emit('search', this)
			},
			index: function(event) {
				this.$emit('index', this)
			}
		}
	}
</script>

<style>

</style>